import { useState } from "react";
import { Card, Layout, Typography } from "antd";
import { UserOutlined } from "@ant-design/icons";
import Color from "color";
import { useTranslation } from "react-i18next";
import { Navigate } from "react-router-dom";
import { useUserToken } from "@/store/userStore";
import { useThemeToken } from "@/theme/hooks";
import { APP_CONFIG } from "@/config/app";
import { useConfig } from "@/contexts/ConfigContext";
import DashboardImg from "@/assets/images/background/dashboard.png";
import Overlay2 from "@/assets/images/background/overlay_2.jpg";
import LocalePicker from "@/components/locale-picker";

import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";

const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;

function Login() {
	const { t } = useTranslation();
	const { token } = useUserToken();
	const { colorBgElevated } = useThemeToken();
	const { config } = useConfig();
	const [isRegistering, setIsRegistering] = useState(false);

	// Check if user is authenticated
	if (token) {
		return <Navigate to={HOMEPAGE} replace />;
	}

	const gradientBg = Color(colorBgElevated).alpha(0.9).toString();
	const bg = `linear-gradient(${gradientBg}, ${gradientBg}) center center / cover no-repeat,url(${Overlay2})`;

	return (
		<Layout className="relative flex !min-h-screen !w-full !flex-row">
			<div
				className="hidden grow flex-col items-center justify-center gap-[60px] bg-center bg-no-repeat md:flex"
				style={{
					background: bg,
				}}
			>
				<div className="flex flex-col items-center gap-4">
					<div className="text-4xl font-bold leading-normal text-primary lg:text-5xl xl:text-6xl">
						{APP_CONFIG.name}
					</div>
				</div>
				<img
					className="max-w-[400px] rounded-lg shadow-lg xl:max-w-[400px]"
					src={DashboardImg}
					alt="dashboard"
					loading="lazy"
					decoding="async"
				/>
			</div>

			<div className="relative m-auto flex !h-screen w-full max-w-[600px] flex-col justify-center bg-white px-[24px] shadow-xl lg:px-[64px]">
				{/* <div className="text-center mb-8">
					<h1 className="text-3xl font-bold tracking-tight text-gray-900">
						欢迎使用
					</h1>
					<p className="mt-2 text-sm text-gray-600">
						{isRegistering ? "创建新账号" : "请登录您的账号"}
					</p>
				</div> */}

				<Card className="shadow-lg rounded-lg">
					{isRegistering ? <RegisterForm /> : <LoginForm />}

					<div className="mt-4 text-center">
						<p className="text-sm text-gray-600">
							{isRegistering ? "已有账号？" : "还没有账号？"}{" "}
							<button
								onClick={() => setIsRegistering(!isRegistering)}
								className="text-primary hover:text-primary-dark border-none bg-transparent cursor-pointer"
							>
								{isRegistering ? "立即登录" : "立即注册"}
							</button>
						</p>
					</div>
				</Card>

				<div className="absolute right-4 top-4">
					{/* <LocalePicker /> */}
				</div>

				{/* 备案号 */}
				<div className="absolute left-1/2 -translate-x-1/2 bottom-4 text-center text-gray-400 text-sm">
					{config?.beian && (
						<a 
							href="https://beian.miit.gov.cn/" 
							target="_blank" 
							rel="noopener noreferrer"
							className="hover:text-gray-600"
						>
							{config.beian}
						</a>
					)}
				</div>
			</div>
		</Layout>
	);
}

export default Login;
